import React, { useCallback, useEffect, useMemo } from 'react'
import VCard from '../../../components/VCard'
import { Form, Spin, message } from 'antd'
import { getRechargeList } from './service'
import SearchForm from '../../../components/SearchForm'
import { ExportToExcel } from '../../../utils/export'


interface RefuelRechargeRecordType {
  status: string
  count: number
}
export default function RefuelRechargeRecord() {
  const [form] = Form.useForm();
  const [recharge, setRechargeInfo] = React.useState<any[]>([])
  const [filterData, setFilterData] = React.useState<any[]|null>(null)
  const [loading, setLoading] = React.useState(false)

  const columns=[
    {
      title: '充值编号',
      dataIndex: 'recharge_id',

    },
    {
      title: '卡号',
      dataIndex: 'card_id',
      search:true,

    },
    {
      title: '充值金额',
      dataIndex: 'recharge_amount',
    
    },
    {
      title: '充值日期',
      dataIndex: 'recharge_date',
      ellipsis: true
    },

  ]

  const queryList = async () => {
    setLoading(true)
    await getRechargeList().then(res => {
      setRechargeInfo(res.data.data)
    })

    setLoading(false)
  }
  useEffect(() => {
    queryList()
  }, [])
  return (
    <div className="page-content-container">
    <div className="page-title-container">
      <div className="page-title">油卡充值记录</div>
    </div>
    <div className="page-content">
      {/* <VTable></VTable> */}
      {/* <VCard type="card"></VCard> */}
      <Spin spinning={loading}>
        <SearchForm
          form={form}
          exportToExcel={()=>{
            ExportToExcel('/api/recharge/export','油卡充值记录.xlsx')
          }
            
           }
          params={[
            { type: 'date', name: 'date', label: '时间' }
          ]}
          onFinsh={()=>{
            const values = form.getFieldsValue();
            const params:{start_time?:string,end_time?:string} = {};
            if(values.date){
              params.start_time = values.date[0].format('YYYY-MM-DD');
             params.end_time = values.date[1].format('YYYY-MM-DD');
              const filteredData = recharge.filter(item => {
                const startDate = params.start_time as string;
                const endDate =  params.end_time as string;
                const rechargeDate = item.recharge_date;
                console.log(rechargeDate,startDate,rechargeDate,endDate);
                return rechargeDate >= startDate && rechargeDate <= endDate;
            });
            setFilterData(filteredData);
            }
            else{
              setFilterData(null);
            }
            console.log(values,params);
            // await ...
            
          }}
        />
        <div className="VCard-list">

        <VCard title={'充值记录'} type={'table'} columns={columns} dataSource={filterData||recharge}></VCard>
        </div>

      </Spin>
    </div>
  </div>
  )
}
